import React, { FC } from 'react'
import { AppstoreOutlined, BarsOutlined } from '@ant-design/icons'
import { Tabs, Space } from 'antd'
import ComponentLib from '../ComponentLib/ComponentLib'
import styles from '../index.module.scss'
import Layers from '../Layers/Layers'

const LeftPanel: FC = () => {
    const tabsItem = [
        {
            key: 'componentLib',
            label: (
                <span>
                    <AppstoreOutlined />
                    <Space>组件库</Space>
                </span>
            ),
            children: <ComponentLib />,
        },
        {
            key: 'layers',
            label: (
                <span>
                    <BarsOutlined />
                    <Space>图层</Space>
                </span>
            ),
            children: <Layers />,
        },
    ]

    return (
        <div>
            <div className={styles['operate-wrapper']}>
                <Tabs defaultActiveKey="componentLib" items={tabsItem} />
            </div>
        </div>
    )
}
export default LeftPanel
